<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>酬金明细</el-breadcrumb-item>
        </el-breadcrumb>
        
            <el-card class="box-card">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>条件区域</el-breadcrumb-item>
                </el-breadcrumb>
                    <el-row>
                        <el-col :span="5" class="right">
                            用户姓名:
                        </el-col>
                        <el-col :span='5' class="left">
                            <el-input class="TJMC" v-model="queryForm.userName"></el-input>
                        </el-col>
                        <el-col :span="4" class="right">
                            电话:
                        </el-col>
                        <el-col :span='5' class="left">
                            <el-input class="TJMC" v-model="queryForm.phone"></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5" class="right">
                            邮箱:
                        </el-col>
                        <el-col :span='5' class="left">
                           <el-input class="TJMC" v-model="queryForm.email"></el-input>
                        </el-col>
                        <el-col :span="4" class="right">
                            业务类型:
                        </el-col>
                        <el-col :span='5' class="left">
                            <el-input class="TJMC" v-model="queryForm.courseName"></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5" class="right">
                            生效时间:
                        </el-col>
                        <el-col :span='5' class="left">
                                                           <el-date-picker
                                        v-model="queryForm.effectiveTime"
                                        type="datetime"
                                        placeholder="选择日期时间"
                                        default-time="12:00:00"
                                        class="TJMC">
                                </el-date-picker>
                        </el-col>
                        <el-col :span="4" class="right">
                            失效时间:
                        </el-col>
                        <el-col :span='5' class="left">
                                <el-date-picker
                                        v-model="queryForm.expirationTime"
                                        type="datetime"
                                        placeholder="选择日期时间"
                                        default-time="12:00:00"
                                        class="TJMC">
                                </el-date-picker>
                        </el-col>
                    </el-row>
            </el-card>

        <el-card class="box-card">
            <el-row>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="warning" @click="resetLoginForm">重置</el-button>
                <el-button @click="exportExcel" type="success" class="button">导出</el-button>
            </el-row>
        </el-card>


        <el-card>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>列表区域</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table
                class="table"
                :data="detailList"
                height="350"
                border
                style="width: 100%">
            <el-table-column
                    prop="userId"
                    label="用户ID"
                    width="130"
                    align='center'>
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户姓名"
                    width="130"
                    align='center'>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="130"
                    align='center'>
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="用户邮箱"
                    width="130"
                    align='center'>
            </el-table-column>
            <el-table-column
                    prop="userRemunerationDtoList[0].course.id"
                    label="业务ID"
                    width="130"
                    align='center'>
            </el-table-column>
            <el-table-column
                    prop="userRemunerationDtoList[0].policyName"
                    label="业务名"
                    width="130"
                    align='center'>
            </el-table-column>
            <el-table-column
                    prop="userRemunerationDtoList[0].course.courseName"
                    label="业务类型"
                    width="130"
                    align='center'>
            </el-table-column>
            <el-table-column
                    prop="userRemunerationDtoList[0].topMoney"
                    label="最大金额"
                    width="130"
                    align='center'>
            </el-table-column>
            <el-table-column
                    label="操作"
                    align='center'>
                <template slot-scope="scope">
                    <el-button icon="el-icon-search" circle @click="lookDetail(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle
                               @click="del(scope.row.userId,scope.row.userRemunerationDtoList[0].course.id)"></el-button>

                </template>
            </el-table-column>

        </el-table>
        <div class="page">
                        <el-pagination
                    background
                    layout="prev,pager,next"
                    :total="100"
                    @current-change="fenye($event)"
            >
            </el-pagination>
            总条数:{{zongji}}
            当前页数：{{yeshu}}/{{zongyeshu}}
        </div>
        </el-card>

        <!--        <template>-->
        <!--            <el-button type="text" @click="open">点击打开 Message Box</el-button>-->
        <!--        </template>-->
     <!-- 查看对话框 -->
        <el-dialog width="400px" title="查看信息" :visible.sync="dialogFormCheckVisible">
            <el-form :model="checkForm">
                <el-row>
                    <el-col :span="6" class="right">用户Id：</el-col>
                    <el-col :span="10" class="left">
                         {{ this.checkForm.userId }}
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6" class="right">电子邮箱：</el-col>
                    <el-col :span="10" class="left">
                         {{ this.checkForm.email }}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="right">电话：</el-col>
                    <el-col :span="10" class="left">
                    {{ this.checkForm.phone }}
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6" class="right">生效时间：</el-col>
                    <el-col :span="10" class="left">
                        {{ this.checkForm.effectiveTime }}
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6" class="right">失效时间：</el-col>
                    <el-col :span="10" class="left">
                        {{ this.checkForm.expirationTime }}
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6" class="right">业务名：</el-col>
                    <el-col :span="10" class="left">
                        {{ this.checkForm.courseName }}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="right">业务Id：</el-col>
                    <el-col :span="10" class="left">
                        {{ this.checkForm.id}}
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6" class="right">政策名：</el-col>
                    <el-col :span="10" class="left">
                        {{ this.checkForm.policyName}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="right">最大金额：</el-col>
                    <el-col :span="10" class="left">
                        {{ this.checkForm.topMoney}}
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormCheckVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'


    export default {
        data() {
            return {
                userAction: this.$store.state.userInfo.userAction,
                userId:this.$store.state.userInfo.userId,
                zongji: 12,
                yeshu: 1,
                dialogFormCheckVisible: false,
                zongyeshu: 1,
                input: '',
                detailList: [],
                queryForm: {
                    userName: "",
                    phone: "",
                    email: "",
                    courseName: "",
                    effectiveTime: "",
                    expirationTime: ""
                },
                effectiveTime: "",
                expirationTime: "",

                checkForm:{
                    userId:"",
                    email:"",
                    phone:"",
                    id:"",
                    courseName:"",
                    effectiveTime:"",
                    expirationTime:"",
                    policyName:"",
                    topMoney: ""
                },
                delForm: {
                    id: "",
                    policyInfoId: ""
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
                value3: ''
            };
        },

        created() {
            // this.$axios.get('api/selectPayDetails', {
            //     params: {
            //         userid: "2", userAction: "1", limt: 10, page: 1
            //     }
            // }).then((response) => {
            //     let result = response.data;
            //     console.log(result)
            //     this.detailList = result.data;
            //     console.log(this.detailList.userRemunerationDtoList)
            // })
            this.getList()

        },

        methods: {
            dateFormat(date){
                let month = date.getMonth()+1;
                let day = date.getDate();
                let hours = date.getHours();
                let minutes = date.getMinutes();
                let seconds = date.getSeconds();
                if (month<10){
                    month = "0" + month;
                }
                if (day<10){
                    day = "0" + day;
                }
                if (hours<10){
                    hours = "0" + hours;
                }
                if (minutes<10){
                    minutes = "0" + minutes;
                }
                if (seconds<10){
                    seconds = "0" + seconds;
                }
                return date=""+date.getFullYear()+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
            },
            resetLoginForm () {
                this.queryForm.userName="";
                this.queryForm.phone="";
                this.queryForm.email="";
                this.queryForm.effectiveTime="";
                this.queryForm.expirationTime="";
                this.queryForm.courseName=""
            },
            getList(){
                this.$axios.get('api/selectPayDetails', {
                    params: {
                        userid: this.userid, userAction: this.userAction, limt: 10, page: 1
                    }
                }).then((response) => {
                    let result = response.data;
                    console.log(result)
                    if (this.userAction==1){

                        let result1=this.$store.state.userInfo;

                        this.detailList=result1.data
                    }else{
                        this.detailList = result.data;
                    }


                })
            },
            query() {

                console.log(this.queryForm.effectiveTime)
                if(this.queryForm.effectiveTime !=""  ){
                this.effectiveTime = this.dateFormat(this.queryForm.effectiveTime);

                }
                console.log(this.queryForm.expirationTime)
                if(this.queryForm.expirationTime !=""){
                    this.expirationTime = this.dateFormat(this.queryForm.expirationTime);
                }
                this.$axios.get('api/selectPayDetails', {
                    params: {
                        userAction: this.userAction,
                        userId: this.userId,
                        userName: this.queryForm.userName,
                        phone: this.queryForm.phone,
                        email: this.queryForm.email,
                        effectiveTime: this.effectiveTime,
                        expirationTime: this.expirationTime,
                        courseName: this.queryForm.courseName,
                    }
                }).then((response) => {
                    let result = response.data;
                    this.detailList = result.data;
                    // this.getList()
                    console.log(result)
                })



            },
            del(userId, policyInfoId) {
                this.$axios.post('api/deletePayDetails', this.$qs.stringify({
                        userId: userId,
                        policyInfoId: policyInfoId,
                        userAction: 2,
                    })
                ).then((response) => {
                    let result = response.data;
                    this.detailList = result.data;
                    this.getList()
                }).catch((err) => {
                    console.log(err)
                })
            },
            fenye(e) {
                console.log(e)
                this.yeshu = e;
            },
            exportExcel() {
                // 设置当前日期
                let time = new Date();
                let year = time.getFullYear();
                let month = time.getMonth() + 1;
                let day = time.getDate();
                let name = year + "" + month + "" + day;
                // console.log(name)
                /* generate workbook object from table */
                //  .table要导出的是哪一个表格
                var wb = XLSX.utils.table_to_book(document.querySelector(".table"));
                /* get binary string as output */
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    //  name+'.xlsx'表示导出的excel表格名字
                    FileSaver.saveAs(
                        new Blob([wbout], {type: "application/octet-stream"}),
                        name + ".xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
            lookDetail(obj) {
                console.log(obj)
                this.dialogFormCheckVisible = true;
                this.checkForm.id = obj.userRemunerationDtoList[0].course.id;
                this.checkForm.userId = obj.userId;
                this.checkForm.policyName = obj.userRemunerationDtoList[0].policyName;
                this.checkForm.courseName = obj.userRemunerationDtoList[0].course.courseName;
                this.checkForm.documentName = obj.userRemunerationDtoList[0].documentName;
                this.checkForm.effectiveTime = obj.userRemunerationDtoList[0].effectiveTime;
                this.checkForm.phone=obj.phone;
                this.checkForm.email=obj.email;
                this.checkForm.userName=obj.userName
                this.checkForm.expirationTime = obj.userRemunerationDtoList[0].expirationTime;
                this.checkForm.topMoney=obj.userRemunerationDtoList[0].topMoney
            },
        }

    }
</script>

<style scoped>
.right {
    text-align: right;
}
.left {
    text-align: left;
    margin-left: 10px;
}

    p {
        margin: 0px;
    }

    .TJMC {
        width: 300px;
    }

    td {
        text-align: center;
    }
    .page {
        margin-top: 20px;
    }
    .btn-group el-button {
        margin-left: 30px;
    }
    .el-breadcrumb{
        margin-bottom: 10px;
    }
    .box-card {
        margin-bottom: 10px;
    }
    .el-button {
        margin: 0 10px;
    }
    .el-col {
        height: 50px;
        line-height: 50px;
    }


</style>